<template>
  <el-form-item v-bind="formItemAttr" :prop="schema.prop">
    <el-date-picker v-bind="{ ...datePickerAttr, ...$attrs }" @change="change" style="width: 100%;"> </el-date-picker>
  </el-form-item>
</template>

<script setup>
import { lowCodeAttr } from '../../common/util'
defineOptions({ name: 'DatePickerCom' })

const props = defineProps({
  schema: {
    type: Object,
    required: true
  }
})
const schema = props.schema
const formItemAttr = {}

const datePickerAttr = {}

const formItemIncludeAttrs = ['label', 'prop', 'labelWidth']
const comType = schema.comType
const reflectAttr = {
  comType: 'type'
}

for (const key in schema) {
  if (!lowCodeAttr.includes(key)) {
    const value = schema[key]
    if (formItemIncludeAttrs.includes(key)) {
      formItemAttr[key] = value
    } else {
      if (reflectAttr[key]) {
        datePickerAttr[reflectAttr[key]] = value
      } else {
        datePickerAttr[key] = value
      }
    }
  }
}
if (comType === 'daterange') {
  if (!schema.startPlaceholder) {
    datePickerAttr.startPlaceholder = '开始时间'
  }
  if (!schema.endPlaceholder) {
    datePickerAttr.endPlaceholder = '结束时间'
  }
}

function change(e) {
  const value = {
    schema,
    value: e
  }
  if (schema?.event?.change) {
    schema.event.change(value)
  }
}
</script>
